<template>
    <div>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <div>
                    <el-input placeholder="按账号搜索" suffix-icon="el-icon-search" v-model="form.username"
                        @keyup.enter.native="init(currentPag)">
                    </el-input>
                </div>
                <div>

                </div>
            </div>
            <div class="text item">
                <el-table :data="orderList" border style="width: 100%;" ref="multipleTable" v-loading="loading">
                    <el-table-column type="selection" width="55">
                    </el-table-column>
                    <el-table-column prop="id" label="ID" width="180">
                    </el-table-column>
                    <el-table-column prop="username" label="账号" width="150">
                    </el-table-column>
                    <el-table-column prop="name" label="昵称" width="150">
                    </el-table-column>
                    <el-table-column prop="phone" label="联系方式" width="120">
                    </el-table-column>
                    <el-table-column prop="address" label="地址" width="350">
                    </el-table-column>
                    <el-table-column prop="note" label="备注" width="200">
                    </el-table-column>
                    <el-table-column prop="serviceName" label="服务名称" width="150">
                    </el-table-column>
                    <el-table-column prop="homeServiceFee" label="上门费用" width="100">
                    </el-table-column>
                    <el-table-column prop="operatingFee" label="服务费用" width="100">
                    </el-table-column>
                    <el-table-column prop="totalFee" label="总费用" width="100">
                    </el-table-column>
                    <el-table-column prop="status" label="是否付款" width="80">
                        <template slot-scope="scope">
                            <el-tag type="success" v-show="scope.row.isPayment == 1">已付款</el-tag>
                            <el-tag type="danger" v-show="scope.row.isPayment == 2">未付款</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="status" label="是否安排" width="80">
                        <template slot-scope="scope">
                            <el-tag type="success" v-show="scope.row.isDeal == 1">已安排</el-tag>
                            <el-tag type="danger" v-show="scope.row.isDeal == 2">未安排</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="是否反馈" width="80">
                        <template slot-scope="scope">
                            <el-tag type="success" v-show="scope.row.isFeedback == 1">已反馈</el-tag>
                            <el-tag type="danger" v-show="scope.row.isFeedback == 2">未反馈</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="status" label="状态" width="80">
                        <template slot-scope="scope">
                            <el-tag type="success" v-show="scope.row.status == 1">正常</el-tag>
                            <el-tag type="danger" v-show="scope.row.status == 2">禁用</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="100">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="showDealDialogVisible(scope.row)"
                                :disabled="scope.row.isDeal == 1">接收订单</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pagination">
                <el-pagination background layout="prev, pager, next" :total="totalPage" :page-size="pageSize"
                    @current-change="currentChange">
                </el-pagination>
            </div>
        </el-card>
        <el-dialog title="安排" :visible.sync="dealDialogVisible" width="30%">
            <el-form ref="form" :model="form" label-width="100px">
                <el-form-item label="订单ID">
                    <el-input v-model="form.orderId" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="服务时间">
                    <el-input v-model="form.serviceTime">
                        <template slot="append">小时</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="预计上门时间">
                    <el-date-picker v-model="form.arriveTime" type="datetime" format="yyyy-MM-dd HH:mm:ss"
                        value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间">
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dealDialogVisible = false">取 消</el-button>
                <el-tooltip class="item" effect="dark" content="点击确认后不可取消或修改" placement="top">
                    <el-button type="primary" @click="submitOrder">确 定</el-button>
                </el-tooltip>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: "OrderTask",
    data() {
        return {
            // 是否加载
            loading: false,
            // 多选数据
            multipleSelection: [],
            // 当前页数
            currentPag: 1,
            // 每页大小
            pageSize: 10,
            // 总页数
            totalPage: 0,
            // 表单
            form: {
                arriveTime: null,
                serviceTime: ""
            },
            // 是否显示安排
            dealDialogVisible: false,
            // 待处理订单
            waitDealOrder: {}
        }
    },
    mounted() {
        this.init(this.currentPag)
    },
    methods: {
        async init(currentPag) {
            this.loading = true
            let res = await this.$store.dispatch("getOrderList", {
                currentPag: currentPag,
                pageSize: this.pageSize,
                isDeal: 2,
                isPayment: 1,
                isFeedback: 2,
                username: this.form.username
            })
            if (res.success) {
                this.totalPage = parseInt(res.data.totalPag)
                this.currentPag = parseInt(res.data.currentPag)
                this.pageSize = parseInt(res.data.pageSize)
                this.loading = false
            }
            else this.$myfun.resError(res)
        },
        // 更换页数
        currentChange(pag) {
            this.init(pag)
        },
        // 重置
        refresh() {
            let newObj = {}
            this.form = newObj
        },
        // 接收订单
        async submitOrder() {
            console.log(this.form)
            let res = await this.$store.dispatch("doctorDealOrder", {
                orderId: this.form.orderId,
                serviceTime: this.form.serviceTime,
                arriveTime: this.form.arriveTime
            })
            if (res.success) this.$message.success(res.message)
            else this.$myfun.resError(res)
        },
        // 显示接收页面
        showDealDialogVisible(data) {
            this.waitDealOrder = data
            this.form.orderId = data.id
            this.dealDialogVisible = true
        }
    },
    computed: {
        orderList() {
            return this.$store.state.order.orderList
        }
    }
}
</script>

<style scoped>
.clearfix {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pagination {
    padding: 20px 0 10px 0;
    text-align: center;
}
</style>